<template>
  <div class="components-list">
    <!-- 基础字段 -->
    <template v-if="collection.basicFields.length">
      <div class="widget-cate">
        {{ $t('fm.components.basic.title') }}
      </div>
      <draggable
        tag="ul"
        :list="basicComponents"
        v-bind="{
          group: { name: 'widgets', pull: 'clone', put: false },
          sort: false,
          ghostClass: 'ghost',
        }"
        @end="handleMoveEnd"
        @start="handleMoveStart"
        :move="handleMove"
      >
        <template v-for="(item, index) in basicComponents">
          <li
            v-if="collection.basicFields.indexOf(item.type) >= 0"
            class="form-edit-widget-label"
            :class="{ 'no-put': item.type == 'divider' }"
            :key="index"
          >
            <div @click="addWidget(item)">
              <i class="icon iconfont" :class="item.icon"></i>
              <span>{{ item.name }}</span>
            </div>
          </li>
        </template>
      </draggable>
    </template>
    <!-- 高级字段 -->
    <template v-if="collection.advanceFields.length">
      <div class="widget-cate">
        {{ $t('fm.components.advance.title') }}
      </div>
      <draggable
        tag="ul"
        :list="advanceComponents"
        v-bind="{
          group: { name: 'widgets', pull: 'clone', put: false },
          sort: false,
          ghostClass: 'ghost',
        }"
        @end="handleMoveEnd"
        @start="handleMoveStart"
        :move="handleMove"
      >
        <template v-for="(item, index) in advanceComponents">
          <li
            v-if="collection.advanceFields.indexOf(item.type) >= 0"
            class="form-edit-widget-label"
            :class="{ 'no-put': item.type == 'table' }"
            :key="index"
          >
            <div>
              <i class="icon iconfont" :class="item.icon"></i>
              <span>{{ item.name }}</span>
            </div>
          </li>
        </template>
      </draggable>
    </template>
    <!-- 布局字段 -->
    <template v-if="collection.layoutFields.length">
      <div class="widget-cate">
        {{ $t('fm.components.layout.title') }}
      </div>
      <draggable
        tag="ul"
        :list="layoutComponents"
        v-bind="{
          group: { name: 'widgets', pull: 'clone', put: false },
          sort: false,
          ghostClass: 'ghost',
        }"
        @end="handleMoveEnd"
        @start="handleMoveStart"
        :move="handleMove"
      >
        <template v-for="(item, index) in layoutComponents">
          <li
            v-if="collection.layoutFields.indexOf(item.type) >= 0"
            class="form-edit-widget-label no-put"
            :key="index"
          >
            <div>
              <i class="icon iconfont" :class="item.icon"></i>
              <span>{{ item.name }}</span>
            </div>
          </li>
        </template>
      </draggable>
    </template>
    <!-- 自定义字段 -->
    <template
      v-if="
        collection.customizationFields.length &&
        collection.customizationFields.length > 0
      "
    >
      <div class="widget-cate">
        {{ $t('fm.components.customization.title') }}
      </div>
      <draggable
        tag="ul"
        :list="customizationComponents"
        v-bind="{
          group: { name: 'widgets', pull: 'clone', put: false },
          sort: false,
          ghostClass: 'ghost',
        }"
        @end="handleMoveEnd"
        @start="handleMoveStart"
        :move="handleMove"
      >
        <template v-for="(item, index) in customizationComponents">
          <li
            v-if="collection.customizationFields.indexOf(item.type) >= 0"
            class="form-edit-widget-label"
            :class="{ 'no-put': item.type == 'table' }"
            :key="index"
          >
            <div>
              <i class="icon iconfont" :class="item.icon"></i>
              <span>{{ item.name }}</span>
            </div>
          </li>
        </template>
      </draggable>
    </template>
    <!-- 模板 -->
    <template v-if="searchFun">
      <div class="widget-cate">
        {{ $t('fm.components.template.title') }}
      </div>
      <div>
        <div class="widget_label_search">
          <el-input
            v-model="template"
            placeholder="请输入模板名称最少三字"
            size="small"
            @change="querySearchAsync"
          />
        </div>
        <draggable
          tag="ul"
          :list="fields"
          v-bind="{
            group: { name: 'widgets', pull: 'clone', put: false },
            sort: false,
            ghostClass: 'ghost',
          }"
          @end="handleMoveEnd"
          @start="handleMoveStart"
          :move="handleMove"
        >
          <li
            v-for="(item, index) in fields"
            :key="`extend${index}`"
            class="form-edit-widget-label no-put"
          >
            <div>
              <i class="icon iconfont icon-extend" />
              <span>{{ item.name }}</span>
            </div>
          </li>
        </draggable>
      </div>
    </template>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import {
  basicComponents,
  layoutComponents,
  advanceComponents,
  customizationComponents,
} from '@/configs/componentsConfig.js'

import {
  basicFields,
  advanceFields,
  layoutFields,
  customizationFields,
} from '@/configs/filedConsts.js'

import Fields from '@/configs/extendFields'

export default {
  components: {
    Draggable,
  },
  props: {
    collection: {
      type: Object,
      default: () => {
        return {
          basicFields,
          advanceFields,
          layoutFields,
          customizationFields,
        }
      },
    },
    searchFun: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      basicComponents,
      layoutComponents,
      advanceComponents,
      customizationComponents,
      template: '',
      fields: [],
    }
  },
  created() {},
  mounted() {
    this._loadComponents()
  },
  methods: {
    handleMoveEnd(evt) {
      console.log('field bar move end', evt)
    },
    handleMoveStart(evt) {
      console.log('start move-----------------')
      console.log('start', evt)
      console.log('start move end ------------')
    },
    handleMove() {
      return true
    },
    addWidget(item) {
      this.$emit('addWidget', Object.assign({}, item))
    },
    _loadComponents() {
      this.basicComponents = this.basicComponents.map((item) => {
        return {
          ...item,
          name: this.$t(`fm.components.fields.${item.type}`),
        }
      })
      this.advanceComponents = this.advanceComponents.map((item) => {
        return {
          ...item,
          name: this.$t(`fm.components.fields.${item.type}`),
        }
      })
      this.layoutComponents = this.layoutComponents.map((item) => {
        return {
          ...item,
          name: this.$t(`fm.components.fields.${item.type}`),
        }
      })
      this.customizationComponents = this.customizationComponents.map(
        (item) => {
          return {
            ...item,
            name: this.$t(`fm.components.fields.${item.type}`),
          }
        }
      )
    },
    querySearchAsync(queryString) {
      console.log(queryString)
      console.log('search template')
      this.fields = Fields
    },
  },
  watch: {
    '$i18n.locale': function (val) {
      this._loadComponents()
    },
  },
}
</script>

<style lang="scss" scoped>
.widget_label_search {
  padding: 0 15px 15px;
}
</style>
